<template>
  <div class="log">
    <PageSearch
      :pageSearchConfig="pageSearchConfig"
      @reset="handleReset"
      @search="handleSearch"
    ></PageSearch>
    <PageContent
      class="pageContent"
      :pageContentConfig="refPageContentConfig"
      ref="pageContentRef"
      @createData="changeDialogVisible"
      @edit="handleEdit"
      @changePropListShow="changePropListShow"
    ></PageContent>
    <PageModal
      ref="pageModalRef"
      :pageModalConfig="pageModalConfig"
      :defaultInfo="defaultInfo"
    >
    </PageModal>
  </div>
</template>

<script setup lang="ts">
import PageSearch from '@/components/page-search'
import PageContent from '@/components/page-content'
import PageModal from '@/components/page-modal'
import { pageSearchConfig } from './config/search'
import { pageContentConfig } from './config/content'
import { pageModalConfig } from './config/modal'
import { usePageSearch } from '@/hooks/usePageSearch'
import { usePageModal } from '@/hooks/usePageModal'
import { usePageContent } from '@/hooks/usePageContent'
//为什么放在这里来呢因为是搜索部分调用了content部分的方法
const [pageContentRef, handleReset, handleSearch] = usePageSearch()

// 响应式数据,方便子组件根据这个值的改变响应
const [refPageContentConfig, changePropListShow] =
  usePageContent(pageContentConfig)
// 新增数据的弹窗的显示,编辑数据的弹窗显示
const [pageModalRef, defaultInfo, changeDialogVisible, handleEdit] =
  usePageModal()
</script>

<style lang="less" scoped>
.log {
  .table {
    margin-top: 20px;
  }
  .pageContent {
    margin-top: 50px;
  }
}
</style>
